<template>
  <view class="share-app">
    <header-vue :back="true" :title="'推广海报'"></header-vue>

    <view class="share-app-content">
      <!-- 引入分享弹窗组件 -->
      <share-popup :show.sync="showSharePopup" />
      <view class="background-image">
        <image
          :src="IMAGE_URL+'/static/master/help-bg.png'"
          mode="aspectFill"
          class="bg-img"
        ></image>
      </view>
      <view class="content-top">
        <view class="share-image">
          <u-image
            :src="IMAGE_URL+'/static/master/tuiguanhaibao.png'"
            mode="aspectFill"
            width="100%"
            height="920rpx"
            radius="0"
          ></u-image>
        </view>
        <view class="share-qr">
          <view class="share-qr-left">
            <view class="app-name">这里是APP名称</view>
            <view class="wx-ss">
              <text>微信扫一扫 即刻下载</text>
            </view>
          </view>
          <view class="share-qr-right">
            <u-image
              :src="IMAGE_URL+'/static/master/ercode.png'"
              mode="aspectFill"
              width="140rpx"
              height="140rpx"
              radius="0"
            ></u-image>
          </view>
        </view>
      </view>

      <view class="content-bottom">
        <button class="share-btn" @click="shareApp">立即分享</button>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import SharePopup from "./components/share-popup.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
       IMAGE_URL: appConfig.IMAGE_URL,
      showSharePopup: false,
    };
  },
  components: {
    headerVue,
    SharePopup,
  },
  methods: {
    shareApp() {
      console.log("分享");
      this.showSharePopup = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.share-app {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  .share-app-content {
    z-index: 1; // 确保内容在背景之上
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 28rpx 32rpx;
    overflow-y: auto;
    position: relative;
    .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;

      box-sizing: border-box;
      overflow: hidden;
      .bg-img {
        width: 100%;
        height: 100%;
      }
    }
    .content-top {
      .share-image {
        height: 920rpx;
        width: 100%;
        box-sizing: border-box;

        overflow: hidden;
      }
      .share-qr {
        width: 100%;
        box-sizing: border-box;
        background: linear-gradient(180deg, #2eaaf3 0%, #0785cf 100%);
        border-radius: 0rpx 0rpx 20rpx 20rpx;
        padding: 22rpx 50rpx;
        display: flex;
        justify-content: space-between;
        .share-qr-left {
          .app-name {
            font-size: 48rpx;
            color: #ffffff;
            text-align: left;
            margin-bottom: 12rpx;
          }
          .wx-ss {
            text-align: center;
            background: #ffab21;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            padding: 8rpx 16rpx;
            box-sizing: border-box;
            font-size: 24rpx;
            color: #ffffff;
            width: 260rpx;
          }
        }
        .share-qr-right {
          width: 140rpx;
          width: 140rpx;
          overflow: hidden;
        }
      }
    }
    .content-bottom {
      width: 100%;
      display: flex;
      margin-top: 80rpx;
      justify-content: center;
      align-items: center;
      .share-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80rpx;
        background: #0785cf;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #ffffff;
        border: none;
      }
    }
  }
}
</style>
